import 'package:flutter/material.dart';

class WrapViewPage1 extends StatelessWidget {
  const WrapViewPage1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wrap 组件'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(3),
          child: Wrap(
            spacing: 15,
            runSpacing: 15,
// direction: Axis.vertical,
            //alignment: WrapAlignment.center,
// runAlignment: WrapAlignment.center,
            children: <Widget>[
              Button("第1集1111", onPressed: () {}),
              Button("第2集", onPressed: () {}),
              Button("第3集", onPressed: () {}),
              Button("第4集", onPressed: () {}),
              Button("第5集", onPressed: () {}),
              Button("第6集", onPressed: () {}),
              Button("第7集", onPressed: () {}),
              Button("第8集", onPressed: () {}),
              Button("第9集", onPressed: () {}),
              Button("第10集", onPressed: () {}),
              Button("第11集", onPressed: () {}),
              Button("第12集", onPressed: () {}),
              Button("第13集", onPressed: () {}),
              Button("第14集", onPressed: () {}),
              Button("第15集", onPressed: () {}),
              Button("第16集", onPressed: () {}),
              Button("第17集", onPressed: () {}),
              Button("第18集", onPressed: () {}),
            ],
          ),
        ),
      ),
    );
  }
}

class WrapViewPage2 extends StatelessWidget {
  const WrapViewPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('搜索界面调试'),
        ),
        body: ListView(
          padding: EdgeInsets.all(10),
          children: [
            /* Container(
              alignment: Alignment.centerLeft,
              child:,
            ),*/
            Row(
              children: [_buildTitle('热搜')],
            ),
            Wrap(
              spacing: 4,
              runSpacing: 4,
              children: [
                Button("女装", onPressed: () {
                  print('女装');
                }),
                Button("男装", onPressed: () {
                  print('男装');
                }),
                Button("笔记本", onPressed: () {
                  print('笔记本');
                }),
                Button("IC", onPressed: () {
                  print('IC');
                }),
                Button("台式", onPressed: () {
                  print('台式');
                }),
                Button("欧美", onPressed: () {
                  print('欧美');
                }),
                Button("亚洲", onPressed: () {
                  print('亚洲');
                }),
                Button("东北", onPressed: () {
                  print('东北');
                }),
                Button("童装", onPressed: () {
                  print('童装');
                }),
                Button("小吃", onPressed: () {
                  print('小吃');
                }),
              ],
            ),
            //  _buildTitle('历史记录'),
            Row(
              children: [_buildTitle('历史记录')],
            ),
            _buildListTitle('女装'),
            _buildListTitle('笔记本'),
            SizedBox(height: 40),
            /*   OutlinedButton.icon(
              icon: Icon(Icons.delete),
              onPressed: () {
                print('点击了清空历史记录');
              },
              label: Text('点击了清空历史记录'),
            ),
*/
            Padding(
              padding: const EdgeInsets.all(40),
              child: OutlinedButton.icon(
                  //自适应
                  style: ButtonStyle(
                      foregroundColor:
                          MaterialStateProperty.all(Colors.black45)),
                  onPressed: () {},
                  icon: const Icon(Icons.delete),
                  label: const Text("清空历史记录")),
            )

            /*  Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: ,
              children: [
                OutlinedButton.icon(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    print('点击了清空历史记录');
                  },
                  label: Text('点击了清空历史记录'),
                )
              ],
            )*/
          ],
        ),
      ),
    );
  }

  _buildTitle(String title) {
    return Column(
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        Divider(height: 1),
      ],
    );
  }

  _buildListTitle(title) {
    return Column(
      children: [
        ListTile(
          title: Text(title),
        ),
        Divider(height: 1),
      ],
    );
  }
}

class Button extends StatelessWidget {
  String text;
  void Function()? onPressed;
  Button(this.text, {Key? key, required this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: onPressed,
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(
              const Color.fromARGB(255, 236, 233, 233)),
          foregroundColor: MaterialStateProperty.all(Colors.black),
          side: MaterialStateProperty.all(
              const BorderSide(width: 1, color: Colors.grey))),
      child: Text(text),
    );
  }
}
